<template>
    <div class="up-seriec-ideo main-color">
       <div class="limit">
            <div class="video-header">
                <h2>上传系列视频</h2>
            </div>
            <el-form :model="videoData" label-width="100px">
                <file-image class="file-image-style" :covername="moduleName" v-on:setImageUrl="getImage"></file-image>
                <el-form-item label="活动名称：">
                    <el-input placeholder="请输入视频的名称" v-model="videoData.name"></el-input>
                </el-form-item>
                <el-form-item label="类目：">
                    <el-select v-model="videoData.region" placeholder="请选择">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否收费：">
                    <el-radio-group v-model="videoData.resource" size="medium">
                        <el-radio border label="收费"></el-radio>
                        <el-radio border label="免费"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <div class="astrict">
                    <div class="clear-fix">
                        <div>
                            <input type="text" placeholder="请输入价钱">
                            <span>元</span>
                        </div>
                        <div>
                            <input type="text" placeholder="请输入价钱">
                            <span>分钟</span>
                        </div>
                    </div>
                    <p>试看时间依据上课总时间合理设置。例：课程30分钟讲完，可以设置试看为10分钟，不填写或填写为0表示没有试看。</p>
                </div>
                <el-form-item class="video-abstract" label="视频简介：" prop="desc">
                    <el-input type="textarea" placeholder="请填写您在职的学校或机构" v-model="videoData.desc"></el-input>
                   
                </el-form-item>
            </el-form>

            <div class="submit">
                <button @click="submit">下一步</button>
            </div>
       </div>
    </div>
</template>

<script>
import fileImage from '../sub_components/file_image'
export default {
    data() {
        return {
            moduleName: '视频封面：',
            schedule: true, //进度
            videoData: {
                image: '',
                name: '',
                region: '',
                resource: '收费',
                desc: ''
            }
        }
    },
    components: {
        fileImage
    },
    created() {},
    methods: {
        // 获取图片url
        getImage(url, file) {
            this.image = url
        },
        // 提交系列
        submit(){
            this.$router.push({path:'/video_seriec/all_video/'+this.$route.params.videoId})
        }
    }
}
</script>

<style lang="less">
.up-seriec-ideo {
    .limit {
        max-width: 900px;
        padding: 0 20px;
        .video-header {
            margin-top: 20px;
            h2 {
                display: inline-block;
                text-align: left;
                padding: 10px 3px;
                font-weight: 600;
                border-bottom: 3px solid #399bff;
            }
        }
        .audit-status {
            height: 60px;
            line-height: 60px;
            background-color: #f6f6f6;
            padding: 0 20px;
            margin-top: 30px;
            > span {
                font-size: 14px;
                &:first-child {
                    font-size: 20px;
                    font-weight: 600;
                }
                &:last-child {
                    float: right;
                    color: #666;
                }
            }
        }
        .file-image-style {
            margin-top: 60px;
        }
        .el-form-item {
            margin-top: 40px;
            height: 40px;
            .el-input__inner {
                border-radius: 0;
            }
        }
        .el-select {
            width: 400px;
        }
        .el-form-item__content {
            height: 40px;
            .el-radio.is-bordered.is-checked {
                border: none;
                background-color: #399bff;
            }
            .el-radio__input.is-checked + .el-radio__label {
                color: #fff;
            }
            .el-radio {
                width: 150px;
                border-radius: 40px;
                text-align: center;
                &:last-child {
                    margin-left: 30px;
                }
            }
            .el-radio-group {
                .el-radio__input {
                    display: none;
                }
                .el-radio__original {
                    display: none;
                }
            }
        }
        .el-textarea {
            .el-textarea__inner {
                height: 300px;
            }
        }
        .video-abstract {
            height: 300px;
        }
        .astrict {
            margin-left: 100px;
            > div {
                height: 40px;
                > div {
                    float: left;
                    width: 300px;
                    border: 1px solid #ccc;
                    height: 40px;
                    > input {
                        display: inline-block;
                        padding-left:10px;
                        width: 80%;
                        font-size: 14px;
                        line-height: 30px;
                        height: 35px;
                    }
                    > span {
                        display: inline-block;
                        font-size: 14px;
                        line-height: 40px;
                        text-align: center;
                        width: 10%;
                        color: #000;
                    }
                    &:nth-child(2) {
                        margin-left: 20px;
                    }
                }
            }
            > p {
                color: #999;
                height: 30px;
                margin-top: 14px;
                font-size: 14px;
            }
        }
        .submit {
            width: 100%;
            padding: 60px 0;
            > button {
                background-color: #399bff;
                color: #fff;
                width: 250px;
                height: 40px;
                border-radius: 20px;
                display: block;
                margin: 0 auto;
            }
        }
    }
}
</style>


